import { Store } from "../../core";

import StoreProps from "./StoreProps";
import useZoom from "./useZoom";
import { FC, ReactElement } from "react";

interface RenderCurrentScaleProps {
  scale: number;
}

type RenderCurrentScale = (props: RenderCurrentScaleProps) => ReactElement;

export interface CurrentScaleProps {
  children?: RenderCurrentScale;
}

const CurrentScale: FC<{
  children?: RenderCurrentScale;
  store: Store<StoreProps>;
}> = ({ children, store }) => {
  const { scale } = useZoom(store);

  const defaultChildren = (props: RenderCurrentScaleProps) => (
    <>{`${Math.round(props.scale * 100)}%`}</>
  );
  const render = children || defaultChildren;

  return render({ scale });
};

export default CurrentScale;
